<!-- 展示 》 富文本 -->

<template>
  <el-form-item ref="item" v-bind="formItem" :style="itemStyle">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="myDivClass" :style="myDivStyle">
      <!-- 展示器 -->
      <EasyScroll v-if="limitHeight" :auto="auto" :wide="wide">
        <div ref="viewer" :class="`${viewerClass}-viewer`" v-html="model" />
      </EasyScroll>
      <div v-else ref="viewer" :class="`${viewerClass}-viewer`" v-html="model" />

      <!-- 全屏切换 -->
      <div v-if="showFull" class="w-e-toolbar">
        <div class="w-e-menu" @click="full = !full">
          <i v-if="full" class="w-e-icon-fullscreen_exit" />
          <i v-else class="w-e-icon-fullscreen" />
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'
import EasyScroll from '../../EasyScroll'

const name = 'ShowRichText'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow, { components: { EasyScroll } }],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: '', // 内部绑定值
      EMPTY: '', // 空值常量
      full: false, // 是否全屏
      itemHeight: 0, // 表单项高度
      htmlHeight: 0, // 内容高度
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 样式类前缀
     */
    viewerClass: () => `CoreWeb-${name}`,

    /**
     * 表单项样式
     */
    itemStyle() {
      const { height, maxHeight, getSize } = this
      if (height) return { height: getSize(height) }
      if (maxHeight) return { maxHeight: getSize(maxHeight) }
      return null
    },

    /**
     * 限制高度
     */
    limitHeight() {
      const { height, itemHeight, htmlHeight, getSize } = this
      if (height) return getSize(height)
      if (htmlHeight > itemHeight) return getSize(itemHeight)
      return null
    },

    /**
     * 自定义样式类
     */
    myDivClass() {
      let { className, viewerClass, full, border } = this
      if (full) className += ` ${viewerClass}-full`
      if (border) className += ` ${viewerClass}-border`
      return className
    },

    /**
     * 自定义样式对象
     */
    myDivStyle() {
      const { limitHeight, getSize, full } = this
      return limitHeight && !full ? { height: getSize(limitHeight) } : null
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, model, empty, EMPTY } = this
      this.setHtmlHeight()
      return obj[prop] !== (model || empty || EMPTY)
    },

    /**
     * 设置内容高度
     */
    setHtmlHeight() {
      if (!this.height && this.maxHeight) {
        setTimeout(() => {
          this.itemHeight = this.$refs.item.$el.clientHeight
          this.htmlHeight = this.$refs.viewer.clientHeight
        })
      }
    },
  },
}
</script>
